<script setup lang="ts">
import { useRouter,useRoute } from "vue-router";
import {UserType} from "../models/user";
import { getDelTeamMember } from "@/api/team";

const router = useRouter()
interface UserCardListProps {
  userList: UserType[];
}

const props = withDefaults(defineProps<UserCardListProps>(), {
  userList: []
});
const detail = (id: number) => {
  router.push({
    path: '/user/detail',
    query:{
      id
    }
  })
}
const emit = defineEmits(['delMember'])
const route = useRoute()
const teamId = route.query.id as string
// 去聊天页面
const delMember = async (userId:number) => {
  const res = await getDelTeamMember(teamId,userId)
  if(res.data.code === 0){
    emit('delMember')
    console.log(123)
  }
}
</script>

<template>
  <van-card
      v-for="user in props.userList"
      :key="user.id"
      :desc="user.profile"
      :title="`${user.username}`"
      :thumb="user.avatarUrl"
  >
    <template #thumb>
      <van-image
        width="88"
        height="88"
        fit="cover"
        :src="user.avatarUrl"
        @click=detail(user.id)
      />
    </template>
    <template #tags>
      <van-tag @click=detail(user.id) color="#008811" v-for="item in user.tags" plain type="primary">{{ item }}</van-tag>
    </template>
    <template #num>
      <van-button size="small" @click="delMember(user.id)">踢出队伍</van-button>
    </template>
  </van-card>
</template>

<style scoped>

</style>